<script>
/**
 * @desc 本月收支情况
 */

import { mapState, mapGetters, mapMutations } from 'vuex'
import DayBillList from '@/components/day-bill-list'
import { toDailyList } from '@/utils'

export default {
  name: 'month-book',
  components: { DayBillList },
  computed: {
    ...mapState('Wallet', ['tabIndex']),
    ...mapGetters('Wallet', ['currMonthList']),
    list() {
      return toDailyList(this.currMonthList).reverse()
    }
  },
  methods: {
    ...mapMutations('Wallet', ['handleTab'])
  }
}
</script>

<template>
  <div :class="$sty.container">
    <div
      :class="$sty.tabs"
      id="wallet-type-tabs"
    >
      <!-- 如果使用遍历,则无法在载入时获取节点信息 -->
      <span
        :class="[$sty.tab,tabIndex===0?$sty.active:'']"
        @click="()=>handleTab(0)"
      >所有</span>
      <span
        :class="[$sty.tab,tabIndex===1?$sty.active:'']"
        @click="()=>handleTab(1)"
      >收入</span>
      <span
        :class="[$sty.tab,tabIndex===2?$sty.active:'']"
        @click="()=>handleTab(2)"
      >支出</span>
    </div>

    <div id="wallet-book-list">
      <day-bill-list
        :key="i"
        :list="v"
        :type="tabIndex"
        v-for="(v,i) in list"
      />
    </div>
  </div>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
